<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.normal{
			width: 100px;
			height: 100px;
			background: red;
			margin-top: -50px
		}
		p{
			background: lightblue;
			/*文字是行盒，行盒是更加靠前的，常规流块盒能覆盖块盒p元素，但是不能覆盖p元素里的行盒，p元素里边生成匿名行盒*/
		}

		.normal1{
			width: 100px;
			height: 100px;
			background: yellowgreen;
			margin-top: -30px;
			/*span元素不能覆盖，span元素本身就是行盒*/
		}
		span{
			background: lightblue;
		}
	</style>
</head>
<body>
	<p >
		Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Error consectetur, quod vel repellendus distinctio odio rem quam quia magni nulla illum molestiae quasi unde consequatur perspiciatis. Nulla perferendis provident quas non assumenda. Animi perferendis, non expedita nemo, sequi nisi eligendi nobis autem. Obcaecati, eaque maiores porro debitis, iure magnam temporibus sed voluptas inventore veritatis atque illum vel numquam distinctio labore fuga explicabo optio in minima. Natus voluptate quo saepe iste debitis maxime qui vel praesentium sed, iusto ea voluptates, soluta rem eos similique corporis quaerat cupiditate tempore iure, magnam eius suscipit inventore totam vero nulla. Incidunt amet ut voluptatibus dolores.
	</p>
	<div class="normal"></div>
	<span>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum necessitatibus expedita quae sed, eveniet perferendis non optio eos quam, repellat dignissimos dicta placeat vel deserunt. Debitis facilis ipsam quos repellendus eum in tempore adipisci magni, officiis maiores, ut alias! Vero, eaque. Aut nam veritatis nostrum iusto aliquid rem aperiam et id totam esse placeat ratione ipsum debitis perspiciatis earum impedit nisi vero deleniti sit incidunt enim exercitationem inventore possimus, mollitia obcaecati! Similique iure iste dignissimos voluptates officiis quae perspiciatis quos, quas labore ullam aut, eum explicabo deleniti, praesentium magnam dolorem! Odio nihil esse harum laboriosam consectetur officiis ea nesciunt optio.
	</span>

	<div class="normal1"></div>
</body>
</html>